/**
 * Created by Administrator on 2017/9/12.
 */
var React = require('react');
var Bheader = require('../widget/Bheader');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');
var MsgBox = require('../components/MsgBox');


module.exports = React.createClass({
    getInitialState: function () {
        return {
            jifen:0,
            pointPro:[],
        }

    },
    componentDidMount: function () {
        this.getPointPro();
        this.getUserInfoByUid();
        setTimeout(this.iscroll,500);
    },

    /**iScroll插件*/
    iscroll(){
        var p =this;
        var options = {
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        };
        p.myScroll = new IScroll("#ScrollContainer",options);
    },
    /**获取积分商品*/
    getPointPro(){
        var p =this;
        ajax("POST","getPointPro",{},function(dt){
            if(dt&&dt.success){
                var objs = dt.data;
                p.setState({pointPro:objs});
            }
        });
    },
    /**获取积分*/
    getUserInfoByUid(){
        var p =this;
        var userId = localStorage.getItem("userId");
        ajax("POST","getUserInfoByUid",{userId:userId},function(dt){
            if(dt&&dt.success){
                var obj =dt.data[0];
                p.setState({jifen:obj.jifen});
                console.log(obj.jifen);
            }
        })
    },
    /**跳转页面*/
    action: function (e){
        var action = e.currentTarget.getAttribute("action");
        var goods_id = e.currentTarget.getAttribute("data");
        var proPoint = e.currentTarget.getAttribute("data-point");
        if(action == "#pointGoodDetail"){
            if(this.state.jifen < proPoint){
                this.refs.MsgBox.setState({
                    type: "no",
                    timeout:1000,
                    show:true,
                    word:"积分不足"
                })
            }else{
                localStorage.setItem("goods_id",goods_id);
                location.href = action;
            }

        }else{
            location.href = action;
        }
    },
    render: function () {
        var p = this;
        var pointPro = p.state.pointPro;
        var pointProList = pointPro.map(function(obj,index){
            var goods_img = obj.goods_img.split(",");
            return(
                <li key={index}>
                    <div><img src={goods_img[0]}/></div>
                    <p className="name">{obj.goods_name}</p>
                    <p className="tac">
                        &yen;{obj.point_price}+
                        <span className="numEx">{obj.point}</span>积分
                    </p>
                    <center><button onClick={p.action} action="#pointGoodDetail" data={obj.id} data-point={obj.point}>立即兑换</button></center>
                </li>
            )
        });
        return (
            <div className="main"  id="main">
                <Bheader theme={p.state.theme} title="积分商城" headr="false" ></Bheader>
                <div id="ScrollContainer">
                    <div className="shopProWrap" style={{minHeight:"31.18rem"}}>
                        <div id="fenClassPro">
                            <div id="fenClassProImg"><img src="http://115.29.198.39:8080/upload/vip/481819093528645806.jpg" /></div>
                        </div>
                        <div id="jifenNumber">
                            <div className="fl jifenNumberS">当前积分：<span id="numMoney">{p.state.jifen}</span>币</div>
                            <div className="fr">
                                <button className="btn1" onClick={p.action} action="#balancePayments">收支明细</button>
                                <button className="btn2" onClick={p.action} action="#integralRule">积分规则</button>
                            </div>
                        </div>
                        <p className="blankSet"></p>
                        <div id="jifenExchange">
                            <div className="jifenExchangeText"><span>积分兑换</span></div>
                            <ul className="jifenExchangePage">
                                {pointProList}
                            </ul>
                        </div>
                        <div className="pullUp" style={{visibility:p.state.pullUpFlag?"visible":"hidden"}}>
                            <div className="refresh loading"></div>
                        </div>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});

